<template>
  <el-container class="satisfaction-survey-container">
    <el-header class="survey-header">
      <h2>母校行满意度调查</h2> <!-- 修改后的标题 -->
    </el-header>
    <el-main class="survey-main">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学院">
          <el-select v-model="selectedCollege" placeholder="请选择学院">
            <el-option label="全部" value="all"></el-option>
            <el-option label="管理学院" value="管理学院"></el-option>
            <el-option label="艺术学院" value="艺术学院"></el-option>
            <el-option label="体育学院" value="体育学院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="队伍名称">
          <el-input v-model="teamName" placeholder="请输入队伍名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-card class="survey-card">
        <div class="survey-title">满意度调查</div>
        <el-divider></el-divider>
        <el-form :model="surveyItems" class="satisfaction-survey">
          <div class="survey-section" v-for="(item, index) in surveyItems" :key="index">
            <el-form-item :label="item.label" :prop="item.id">
              <el-rate
                  v-model="item.rating"
                  :id="item.id"
                  show-text
                  show-score
                  @change="updateRating(item.id, $event)"
              ></el-rate>
            </el-form-item>
            <div class="rating-result">
              <span>当前评分: {{ item.rating }} 分</span>
            </div>
          </div>
        </el-form>
        <el-divider></el-divider>
        <el-button type="primary" class="submit-button" @click="submitSurvey">提交</el-button>
      </el-card>
    </el-main>

    <!-- 用户建议和反馈弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="改进措施"
        width="40%"
        :before-close="handleDialogClose"
    >
      <el-form :model="feedback">
        <el-form-item label="建议和反馈">
          <el-input
              type="textarea"
              v-model="feedback.suggestions"
              placeholder="请输入您的建议和反馈"
              rows="6"
          ></el-input>
        </el-form-item>
        <el-form-item label="其他改进方面">
          <el-checkbox-group v-model="feedback.otherAspects">
            <el-checkbox label="活动内容">活动内容</el-checkbox>
            <el-checkbox label="活动组织">活动组织</el-checkbox>
            <el-checkbox label="场地布置">场地布置</el-checkbox>
            <el-checkbox label="互动环节">互动环节</el-checkbox>
            <el-checkbox label="其他">其他</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const selectedCollege = ref('');
const teamName = ref('');
const surveyItems = ref([
  { id: 'activity', label: '整体活动满意度', rating: 0 },
  { id: 'activityDetails', label: '活动环节满意度', rating: 0 },
  { id: 'venue', label: '举办地点及会场布置满意度', rating: 0 },
  { id: 'atmosphere', label: '现场氛围满意度', rating: 0 },
  { id: 'games', label: '游戏设置满意度', rating: 0 }
]);

const feedback = ref({
  suggestions: '',
  otherAspects: []
});

const dialogVisible = ref(false);

const updateRating = (id: string, rating: number) => {
  const item = surveyItems.value.find(item => item.id === id);
  if (item) {
    item.rating = rating;
  }
};

const submitSurvey = () => {
  console.log('提交的满意度调查结果:', surveyItems.value);
  ElMessage.success('调查已提交');
  dialogVisible.value = true; // 打开弹窗
};

const submitFeedback = () => {
  console.log('用户反馈:', feedback.value);
  ElMessage.success('反馈已提交');
  dialogVisible.value = false; // 关闭弹窗
};

const handleDialogClose = () => {
  feedback.value.suggestions = '';
  feedback.value.otherAspects = [];
};

const search = () => {
  console.log('查询', teamName.value, selectedCollege.value);
};

const reset = () => {
  teamName.value = '';
  selectedCollege.value = '';
};
</script>

<style scoped>
.satisfaction-survey-container {
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  background-color: #ffffff; /* 修改背景颜色为白色 */
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.survey-header {
  background-color: #ffffff; /* 修改背景颜色为白色 */
  padding: 4px;
  border-radius: 12px 12px 0 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.survey-main {
  padding: 20px;
}

.satisfaction-survey {
  margin-bottom: 20px;
}

.survey-section {
  margin-bottom: 30px;
}

.survey-section .el-form-item {
  margin-bottom: 10px;
}

.rating-result {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

.submit-button:hover {
  background-color: #0056b3;
}

.demo-form-inline {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #f9f9f9f9;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  font-size: 18px;
  font-weight: bold;
}

.el-dialog__body {
  padding: 20px;
  font-size: 14px;
}

.dialog-footer {
  text-align: right;
  padding: 10px 20px;
}

.dialog-footer button {
  margin-left: 10px;
  font-size: 14px;
}

.survey-card {
  background-color: #ffffff; /* 修改背景颜色为白色 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.survey-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.el-divider {
  margin: 20px 0;
}
</style>